@charset "UTF-8";
/**
 * 
 * @authors Your Name (you@example.org)
 * @date    2018-04-23 18:55:42
 * @version $Id$
 */
.banner{ width: 100%; height: 500px;  margin: 0px auto;  overflow: hidden;}
.banner .main{ width: 1920px; height: 500px; position: relative; left: 50%; margin-left: -960px; }

.content{ width: auto; height: auto; background: #fff;}
.content > ul{ width: 1200px; height: 101px;  margin: 0px auto;}
.content > ul li{ width: 144px; height: 101px; float: left; margin: 0px 28px; cursor: pointer;}
.content > ul li span{ display: block; width: 144px; height: 58px; }
.content > ul li p{ font-size: 18px; color: #565656; text-align: center; height: 43px; line-height: 43px;}
.content > ul li:first-child span{ background: url(../img/pro_pic1.png) no-repeat center; }
.content > ul li:first-child +li span{ background: url(../img/pro_pic2.png) no-repeat center; }
.content > ul li:first-child +li +li span{ background: url(../img/pro_pic3.png) no-repeat center; }
.content > ul li:first-child +li +li +li span{ background: url(../img/pro_pic4.png) no-repeat center; }
.content > ul li:first-child +li +li +li +li span{ background: url(../img/pro_pic5.png) no-repeat center;}
.content > ul li:first-child +li +li +li +li +li span{ background: url(../img/pro_pic6.png) no-repeat center;}
.content > ul li:first-child:hover span{ background: url(../img/pro_pic7.png) no-repeat center #05acf2;}
.content > ul li:first-child +li:hover span{ background: url(../img/pro_pic8.png) no-repeat center #05acf2;}
.content > ul li:first-child +li +li:hover span{ background: url(../img/pro_pic9.png) no-repeat center #05acf2; }
.content > ul li:first-child +li +li +li:hover span{ background: url(../img/pro_pic10.png) no-repeat center #05acf2;}
.content > ul li:first-child +li +li +li +li:hover span{ background: url(../img/pro_pic11.png) no-repeat center #05acf2; }
.content > ul li:first-child +li +li +li +li +li:hover span{ background: url(../img/pro_pic12.png) no-repeat center #05acf2; }
.content > ul li:hover p{ background: #05acf2; color: #fff; }
.content > ul li.on p{ background: #05acf2; color: #fff; }
.content > ul li:first-child.on span{ background: url(../img/pro_pic7.png) no-repeat center #05acf2; }
.content > ul li:first-child +li.on span{ background: url(../img/pro_pic8.png) no-repeat center #05acf2; }
.content > ul li:first-child +li +li.on span{ background: url(../img/pro_pic9.png) no-repeat center #05acf2; }
.content > ul li:first-child +li +li +li.on span{ background: url(../img/pro_pic10.png) no-repeat center #05acf2; }
.content > ul li:first-child +li +li +li +li.on span{ background: url(../img/pro_pic11.png) no-repeat center #05acf2; }
.content > ul li:first-child +li +li +li +li +li.on span{ background: url(../img/pro_pic12.png) no-repeat center #05acf2; }

.content ol li{  width: auto; height: 1px;}
.content ol li:first-child{ background: #8b8989; }
.content ol li:first-child +li{ background: #afaeae; }
.content ol li:first-child +li +li{ background: #cccbcc; }
.content ol li:first-child +li +li +li{ background: #e2e2e2; }
.content ol li:first-child +li +li +li +li{ background: #f1f1f1; }

.content .pro{ width: 100%; height: 900px; background: #f8f8f8; padding-top: 45px;}
.content .pro ul{  width: 1208px; height: 900px; margin: 0px auto; }
.content .pro ul li{ width: 264px; height: 408px; float: left;  border: 1px solid #cccccc; margin: 0px 18px 27px 18px; background: #fff; position: relative;}
.content .pro ul li h3{ font-family: "微软雅黑"; font-size: 16px; color: #666; text-align: center; width: 264px; height: 58px; margin-top: 24px; border-bottom: 1px solid #cccccc;}
.content .pro ul li h3 p{ font-family: "微软雅黑"; font-size: 16px; color: #999; text-align: center;}
.content .pro ul li > p{ font-family: "微软雅黑"; font-size: 16px; color: #666; width: 102px; background: #fff; text-align: center; position: absolute; top: 70px; left: 81px;}
.content .pro ul li img{ width: 264px; height: 264px; margin: 8px 0px;}
.content .pro ul li span{ font-family: "微软雅黑"; font-size: 16px; color: #666; width: 264px; height: 41px; border-top: 1px solid #ccc; display: block; text-align: center; line-height: 41px;}

.content .page{ width: auto; height: 30px; padding-bottom: 50px; background: #f8f8f8;}
.content .page .pg{ width: 713px; height: 30px; margin: 0px auto;}
.content .page .pg a{ float: left; font-family: "微软雅黑"; font-size: 16px; color: #999; line-height: 30px; border: 1px solid #ccc; padding: 0px 8px; margin: 0px 5px;}
.content .page .pg a:hover{ background: #33ccff; color: #fff;}
.content .page .pg a.on{ background: #33ccff; color: #fff;}

.content .page .pg .fr{ float: left; font-family: "微软雅黑"; font-size: 16px; color: #999; line-height: 30px;}
.content .page .pg .fr p{ float: left; margin: 0px 5px;}

.content .page .pg form{  float: left; border: 1px solid #ccc;}
.content .page .pg form .ye{ width: 65px; height: 28px; text-align: center;}

.content .page .pg .sub{ float: left;  width: 65px; }
.content .page .pg .sub a{ width: 49px; text-align: center;}